import React, { Component } from 'react'

import '../assert/css/index.css'
import logo from "../assert/image/logo.png" 
import yh from "../assert/image/yh.png" 
import yh2 from "../assert/image/yh2.png" 
import seckill from '../assert/image/seckill.png'
import top from '../assert/image/top.png'
import brand from '../assert/image/brand.png'
import selfsupport from '../assert/image/selfsupport.png'
import integral from '../assert/image/integral.png'
import img_11 from '../assert/image/11.png'
import cg1 from '../assert/image/cg1.png'
import cg2 from '../assert/image/cg2.png'
import {newS,groupOn,secKill,indexGoods} from '../request/home_request'
import {cartAdd} from '../request/cart_request'

export default class Home extends Component {
    state = {
        news_list:[], //新人专享
        wanRen_list: [], //万人团
        secKill_list: [], //秒杀
        goods_list: [{
            description: "",
            goodsname: "",
            id: 1,
            img: "",
            market_price: 5.99,
            price: 2.49
        }], //首页商品展示列表
        goods_index: 0, //面板的索引
    }
    get_goods(index){
        indexGoods(index).then(res=>{
            this.setState({goods_index: index})
            this.setState({goods_list: res.list[index].content})
        })
    }
    UNSAFE_componentWillMount(){
        newS().then(res=>{
            this.setState({news_list: res.list})
        })
        groupOn().then(res=>{
            this.setState({wanRen_list: res.list})
        })
        secKill().then(res=>{
            this.setState({secKill_list: res.list})
        })
        this.get_goods(0)
    }
    componentWillUnmount(){
        this.setState = ()=>false; //重置了setState,防止由于接口响应缓慢导致的组件卸载后数据渲染
    }
    addCar(goodsid,type=2){
        //type确定是万人团，是2
        //num确定为1
        cartAdd(goodsid,type,1).then(res=>{
           if(res.code == 200){
            this.props.restCarList()
           }
        })

    }
    render() {
        const {news_list,secKill_list,goods_list,goods_index} = this.state
        return (
            <>
                <div className="header">
                    <img src={logo} alt="" />
                    <form action="">
                        <input type="text" placeholder="搜索商品" />
                        <button>搜索</button>
                    </form>
                </div>

                <div className="middle">
                    <div className="xrzx">
                        <div className="clearfix top">
                            <h2 className="ft">新人专享</h2>
                            <a href="#" className="rt">查看全部&gt;</a>
                        </div>
                    </div>

                    <div className="xrzx1">
                        <p>
                            <span>1重礼</span>
                            <span>新人特价商品专区</span>
                            <span>（限量供应，先到先得）</span>
                        </p>

                        <div className="look">
                            <ul>
                                {
                                    news_list.map(item=>(
                                        <li key={item.id}>
                                            <img src={this.$static_host+item.img} alt="" />
                                            <span className="now">￥{item.price}</span>
                                            <span className="pri">￥{item.market_price}</span>
                                            <a href="#"></a>
                                        </li>
                                    ))
                                }
                                
                                
                            </ul>
                        </div>

                    </div>
                    <div className="xrzx2">
                        <p>
                            <span>2重礼</span>
                            <span>新人通用50元礼券（下单立减，省了又省）</span>
                        </p>
                        <div>
                            <img className="yh1" src={yh} alt="" />
                            <img className="yh2" src={yh2} alt="" />
                        </div>
                    </div>
                </div>
                <div className="middle-nav box">
                    <ul>
                        <li>
                            <a href="">
                                <img src={seckill} alt="" />
                                <p>限时秒杀</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src={top} alt="" />
                                <p>畅销商品</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src={brand} alt="" />
                                <p>品质大牌</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src={selfsupport} alt="" />
                                <p>小u自营</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src={integral} alt="" />
                                <p>积分商城</p>
                            </a>
                        </li>
                    </ul>
                </div>

                <div className="ms">
                    <div className="cjms">
                        <div className="top">
                            <h2 className="ft">万人团</h2>
                        </div>
                        {
                            
                            this.state.wanRen_list.map(item=>(
                                
                                <div className="content" key={item.id}>
                                    <img src={this.$static_host+item.img} alt="" />
                                    <div>
                                        <span>7.9折</span>
                                        <p>{item.goodsname}......</p>
                                        <p onClick={()=>this.addCar(item.id)}><b>￥{item.price}</b><u>￥{item.market_price}</u></p>
                                    </div>
                                </div>

                            ))
                        }

                        
                        
                    </div>

                    <div className="xsms">
                        <p>
                            <span>限时秒杀</span>
                            <span>新人特价商品专区</span>
                            <span>（限量供应，先到先得）</span>
                        </p>
                        <div className="look">
                            <ul>
                                {
                                    secKill_list.map(item=>(
                                        <li key={item.id}>
                                            <img src={this.$static_host+item.img} alt="" />
                                            <span className="now">￥{item.price}</span>
                                            <span className="pri">￥{item.market_price}</span>
                                            <a href="#"></a>
                                        </li>
                                    ))
                                }
                                
                                
                            </ul>
                        </div>
                    </div>
                </div>
                <div className="two11">
                    <div className="one">
                        <h3>双11尖货预约</h3>
                        <img src={img_11} alt="" />
                    </div>
                    <div className="three">
                        <h3>畅购全球</h3>
                        <img src={cg1} alt="" />
                        <img src={cg2} alt="" />
                    </div>
                </div>
                <div className='nav'>
                    <ul>
                        <li onClick={()=>this.get_goods(0)} className={goods_index===0?'active':''}>
                            <p>热销好货</p>
                            <span>限量抢购</span>
                        </li>
                        <li onClick={()=>this.get_goods(1)} className={goods_index===1?'active':''}>
                            <p>折上折区</p>
                            <span>不买就亏</span>
                        </li>
                        <li onClick={()=>this.get_goods(2)} className={goods_index===2?'active':''}>
                            <p>时令水果</p>
                            <span>当季限定</span>
                        </li>
                        <li onClick={()=>this.get_goods(3)} className={goods_index===3?'active':''}>
                            <p>粮油调味</p>
                            <span>一键购齐</span>
                        </li>
                    </ul>
                </div>
                <div className="main">
                    {
                        goods_list.map(item=>(
                            <div className="item clearfix" key={item.id}>
                                <div className="pic ft">
                                    <img src={this.$static_host+item.img} alt="" />
                                </div>
                                <div className="intro ft">
                                    <span>{item.price/item.market_price*10}折</span>
                                    <p>{item.goodsname}</p>

                                    <u>￥{item.price}</u>
                                    <u>￥{item.market_price*10}</u>
                                    <button onClick={()=>this.addCar(item.id,1)}>加入购物车</button>
                                </div>
                            </div>
                        ))
                    }
                </div>
            </>
        )
    }
}
